<!--
 * @author: sanbao
 * @Date: 2022-07-31 15:16:46
-->
<style lang='scss' scoped>
.my_nav {
  .banxin_center {
    display: flex;
    border-bottom: 1px solid #000;
    padding-top: 20px;
    align-items: center;
    justify-content: space-between;
    nav {
      display: flex;
      margin-right: 400px;
      span {
        padding: 20px 20px;
        height: 100%;
      }
      .active {
        color: blue;
        border-bottom: 3px solid blue;
      }
    }
  }
}
</style>

<template>
  <div class="my_nav">
    <div class="banxin_center">
      <img src="http://101.132.181.9/img/logo.c8999c02.png" alt="" />
      <nav>
        <span
          v-for="(item, index) in navList"
          :key="index"
          @click="tab(index)"
          :class="{ active: tabindex == index }"
        >
          {{ item }}
        </span>
      </nav>
      <div>
        <el-input
          v-model="input3"
          placeholder="请输入搜索内容"
          class="input-with-select"
        >
          <template #append>
            <el-button @click="search">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  components: { Search },
  setup() {
    const router = useRouter();
    const store = useStore();
    const tabindex = computed(() => store.state.tabindex);
    const data = reactive({
      navList: ["首页", "全部商品", "关于我们"],
      input3: "",
      tabindex: tabindex.value,
    });
    const tab = (index) => {
      data.tabindex = index;
      if (index == 0) {
        router.push("/index");
      } else if (index == 1) {
        router.push("/goods");
      } else if (index == 2) {
        router.push("/users");
      }
    };
    const search = () => {
      store.commit("search", data.input3);
      if (router.path !== "/goods") {
        router.push("/goods");
      }
      data.input3 = "";
    };
    return {
      ...toRefs(data),
      tab,
      search,
    };
  },
};
</script>
